<template>
  <div>
    <top-bar backShow="true">
      <div class="search-input" slot="search-input">
        <input type="text" placeholder="搜索新闻、大师或外汇" @focus="hisShow=true" @blur="hisShow=false"/>
      </div>
      <div class="search-his" slot="search-his" v-show="hisShow">
        <div class="his-title">历史搜索</div>
        <div class="delete-btn">
          <div></div>
        </div>
        <ul class="clearfix">
          <li class="pull-left">搜索</li>
          <li class="pull-left">搜索</li>
          <li class="pull-left">历史</li>
          <li class="pull-left">历史</li>
          <li class="pull-left">搜索</li>
          <li class="pull-left">搜索</li>
        </ul>
      </div>
      <div class="search" slot="r-btn">
        <div></div>
      </div>
    </top-bar>
    <div class="content">
      <div class="news con-bg">
        <div class="title items-bet align-c">
          <div class="text">新闻</div>
          <div class="more">…</div>
        </div>
        <ul class="con">
          <li class="flex">
            <img class="pic" src="http://via.placeholder.com/290x200" alt="">
            <div class="flex-1">
              <div class="news-title text-overflow gfc-white">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标</div>
              <div class="news-con text-overflow-multi">
                新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
              </div>
            </div>
          </li>
          <li class="flex">
            <img class="pic" src="http://via.placeholder.com/290x200" alt="">
            <div class="flex-1">
              <div class="news-title text-overflow gfc-white">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标</div>
              <div class="news-con text-overflow-multi">
                新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="master con-bg">
        <div class="title items-bet align-c">
          <div class="text">大师</div>
          <div class="more">…</div>
        </div>
        <ul class="con">
          <li class="flex">
            <img class="pic" src="http://via.placeholder.com/135x135" alt="">
            <div class="flex-1">
              <div class="name gfc-white">大师名字</div>
              <div class="info flex">
                <div class="flex-1">
                  <div><span class="label">胜率</span><span class="gfc-orange2">50.23%</span></div>
                  <div><span class="label">最大回撤</span><span class="gfc-white">5%</span></div>
                </div>
                <div class="flex-1">
                  <div><span class="label">收益率</span><span class="gfc-orange2">500.20%</span></div>
                  <div><span class="label">跟随金额</span><span class="gfc-white">$300000</span></div>
                </div>
              </div>
            </div>
            <div class="arrow"></div>
          </li>
          <li class="flex">
            <img class="pic" src="http://via.placeholder.com/135x135" alt="">
            <div class="flex-1">
              <div class="name gfc-white">大师名字</div>
              <div class="info flex">
                <div class="flex-1">
                  <div><span class="label">胜率</span><span class="gfc-orange2">50.23%</span></div>
                  <div><span class="label">最大回撤</span><span class="gfc-white">5%</span></div>
                </div>
                <div class="flex-1">
                  <div><span class="label">收益率</span><span class="gfc-orange2">500.20%</span></div>
                  <div><span class="label">跟随金额</span><span class="gfc-white">$300000</span></div>
                </div>
              </div>
            </div>
            <div class="arrow"></div>
          </li>
        </ul>
      </div>
      <div class="order con-bg">
        <div class="title items-bet align-c">
          <div class="text">订单</div>
          <div class="more">…</div>
        </div>
        <ul class="con">
          <li class="flex">
            <img class="pic" src="http://via.placeholder.com/135x135" alt="">
            <div class="flex-1">
              <div class="name gfc-white">大师名字</div>
              <div class="info"><span class="label">买入</span><span class="kind">XAU/USD</span><span
                class="price gfc-grey1">100.111-</span><span class="gfc-green">110.111</span>
              </div>
            </div>
            <div class="copy-btn gfc-white align-c">跟随</div>
          </li>
          <li class="flex">
            <img class="pic" src="http://via.placeholder.com/135x135" alt="">
            <div class="flex-1">
              <div class="name gfc-white">大师名字</div>
              <div class="info"><span class="label">买入</span><span class="kind">XAU/USD</span><span
                class="price gfc-grey1">100.111-</span><span class="gfc-orange2">110.111</span>
              </div>
            </div>
            <div class="copy-btn gfc-white align-c">跟随</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="mask" v-show="hisShow"></div>
  </div>
</template>

<script>
  import topBar from '../../components/topBar/topBar.vue'
  export default {
    data() {
      return {
        hisShow: false
      }
    },
    components: {
      topBar
    }
  }
</script>

<style scoped>
  .top-bar .search-input {
    padding: .07rem .63rem;
  }

  .top-bar .search-input input {
    display: block;
    width: 100%;
    height: .3rem;
    line-height: .3rem;
    border-radius: .04rem;
    font-size: .16rem;
    padding: 0 .2rem;
    color: #999;
    background: #F5F5F5;
  }

  .top-bar .search-input input::-webkit-input-placeholder {
    color: #999;
  }

  .top-bar .search-his {
    position: absolute;
    left: .63rem;
    right: .63rem;
    top: .4rem;
    border-radius: .04rem;
    font-size: .16rem;
    color: #999;
    background: #F5F5F5;
    padding: .2rem 0 .02rem;
  }

  .top-bar .his-title {
    margin: 0 0 .2rem .18rem;
  }

  .top-bar .delete-btn {
    position: absolute;
    top: .16rem;
    right: .13rem;
    width: .24rem;
    height: .24rem;
  }

  .top-bar .delete-btn > div {
    width: .14rem;
    height: .14rem;
    margin: .05rem;
    background: url("../../assets/delete.png") no-repeat 0/100% 100%;
  }

  .top-bar li {
    margin: 0 .18rem .18rem;
    color: #666;
  }

  .top-bar .search {
    position: absolute;
    top: 0;
    right: .07rem;
    width: .44rem;
    height: .44rem;
  }

  .top-bar .search > div {
    width: .22rem;
    height: .22rem;
    margin: .11rem auto;
    background: url("../../assets/search2.png") no-repeat 0/100% 100%;
  }

  .content > div {
    margin-bottom: .1rem;
  }

  /*标题*/
  .content .title {
    height: .54rem;
    line-height: .54rem;
    font-size: .18rem;
    color: #6a747f;
    border-bottom: 1px solid #333a42;
  }

  .content .title > div {
    width: .54rem;
    line-height: .54rem;
  }

  .content .title .text {
    margin-left: .09rem;
  }

  .content .title .more {
    font-weight: bold;
    line-height: .44rem;
  }

  /*新闻*/
  .news li.flex, .master li.flex, .order li.flex {
    padding: .2rem .18rem;
    border-bottom: 1px solid #333a42;
  }

  .news li.flex:last-child, .master li.flex:last-child, .order li.flex:last-child {
    border: none;
    background: #2d343d;
  }

  .news .pic {
    width: .97rem;
    height: .68rem;
    margin-right: .18rem;
  }

  .news .flex-1 {
    overflow: hidden;
    position: relative;
  }

  .news .flex-1 .news-title {
    font-size: .16rem;
  }

  .news .flex-1 .news-con {
    font-size: .14rem;
    color: #6A747F;
    line-height: 1.5;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }

  /*大师*/
  .master, .order {
    font-size: .16rem;
  }

  .master .pic, .order .pic {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    margin-right: .18rem;
  }

  .master .arrow {
    width: .12rem;
    height: .22rem;
    margin: .32rem 0 0 .18rem;
    background: url("../../assets/arrow-r.png") no-repeat 0/100% 100%;
  }

  .master .info {
    color: #6a747f;
    margin-top: .18rem;
  }

  .master .info .flex-1 > div:first-child {
    margin-bottom: .18rem;
  }

  .master .info .label {
    padding-right: .08rem;
  }

  /*订单*/
  .order .name {
    margin-bottom: .16rem;
  }

  .order .info span {
    display: inline-block;
    height: .2rem;
    line-height: .2rem;
    vertical-align: middle;
  }

  .order .info .label {
    color: #6a747f;
    padding-right: .08rem;
  }

  .order .info .kind {
    width: .4rem;
    height: .2rem;
    background: #fff;
    font-size: .06rem;
    color: #000;
    margin-right: .18rem;
  }

  .order .copy-btn {
    width: .8rem;
    height: .3rem;
    line-height: .3rem;
    border-radius: .04rem;
    margin-top: .22rem;
    background: #03d396;
    font-size: .13rem;
  }

  .mask {
    position: fixed;
    top: .44rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .7);
  }
</style>
